<template>
  <el-form
    v-show="activeName === 'assistantSettings'"
    ref="formRef"
    style="max-width: 600px"
    :model="form"
    :rules="rules"
    label-width="200px"
    class="form-box"
  >
    <el-form-item label="助理姓名" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="助理描述">
      <el-input v-model="form.description" />
    </el-form-item>
    <el-form-item label="助理头像">
      <ImageUpload v-model:modelValue="form.avatar" :limit="1"></ImageUpload>
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">空回复</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                如果在知识库中没有检索到用户的问题，它将使用它作为答案。
                如果您希望 LLM 在未检索到任何内容时提出自己的意见，请将此留空。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input v-model="form.empty_response" />
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">设置开场白</div>
          <el-tooltip
            effect="dark"
            content="您想如何欢迎您的客户？"
            placement="top"
          >
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input
        v-model="form.prologue"
        :autosize="{ minRows: 4, maxRows: 6 }"
        type="textarea"
      />
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">显示引文</div>
          <el-tooltip
            effect="dark"
            content="是否应该显示原文出处？"
            placement="top"
          >
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="form.quote" />
    </el-form-item>
    <!-- <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">关键词分析</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                应用 LLM 分析用户的问题，提取在相关性计算中要强调的关键词。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="form.keyword" />
    </el-form-item> -->
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">文本转语音</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                是否用语音转换播放语音，请先在设置里面选择TTS（语音转换模型）。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="form.tts" />
    </el-form-item>
    <!-- <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">Tavily API Key</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                如果 API 密钥设置正确，它将利用 Tavily
                进行网络搜索作为知识库的补充。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input v-model="form.tavily" />
    </el-form-item> -->
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">知识库</div>
          <el-tooltip
            effect="dark"
            content="选择关联的知识库。"
            placement="top"
          >
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-select v-model="form.dataset_ids" multiple placeholder="请选择">
        <el-option
          v-for="item in datasetOptions"
          :key="item.dataset_uuid"
          :label="item.dataset_name"
          :value="item.dataset_uuid"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import { datasetListApi } from "@/api/knowledge/chat.js";

const props = defineProps(["modelValue", "activeName", "addEdit"]);
const emits = defineEmits(["update:modelValue"]);

const formRef = ref();
const datasetOptions = ref([]);

const rules = reactive({
  name: [{ required: true, message: "助理姓名是必填项", trigger: "blur" }],
});

const form = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits("update:modelValue", val);
  },
});

onMounted(() => {
  datasetList();
});

// 知识库列表
const datasetList = async () => {
  const { data } = await datasetListApi();
  datasetOptions.value = data?.rows;
};

defineExpose({
  formRef,
  form,
});
</script>

<style lang='scss' scoped>
.form-box {
  :deep(.el-form-item__label) {
    font-weight: 400;
  }
}
.label-box {
  display: flex;
  align-items: center;

  .label {
    margin-right: 4px;
  }
}
.tip-item {
  max-width: 200px;
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>